<template>
  <el-dialog
    class="qualifications-model"
    append-to-body
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(500)"
    :before-close="handleCancel">
    <el-form
      class="qualifications-form"
      :model="form"
      ref="form"
      :rules="rules"
      :label-width="$setRem(140)">
      <el-form-item label="证书名称" prop="certificate_name" required>
        <el-input placeholder="请输入" v-model="form.certificate_name"></el-input>
      </el-form-item>
<!--      <el-form-item label="证书类别" prop="name11" required>-->
<!--        <el-select v-model="form.name11" placeholder="请选择">-->
<!--          <el-option value="施工员" label="施工员"></el-option>-->
<!--          <el-option value="材料员" label="材料员"></el-option>-->
<!--          <el-option value="预算员" label="预算员"></el-option>-->
<!--          <el-option value="安全员" label="安全员"></el-option>-->
<!--          <el-option value="质量检查员" label="质量检查员"></el-option>-->
<!--          <el-option value="特种人员" label="特种人员"></el-option>-->
<!--          <el-option value="一级建造师" label="一级建造师"></el-option>-->
<!--          <el-option value="二级建造师" label="二级建造师"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="证书编号" prop="certificate_id" required>
        <el-input placeholder="请输入" v-model="form.certificate_id"></el-input>
      </el-form-item>
      <el-form-item label="技能等级" prop="skill_level" required>
        <el-input placeholder="请输入" v-model="form.skill_level"></el-input>
      </el-form-item>
      <el-form-item label="发证日期" prop="issue_date" required>
        <el-date-picker
          v-model="form.issue_date"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="有效期至" prop="validity_period" required>
        <el-date-picker
          v-model="form.validity_period"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发证机关" prop="certificate_authority" required>
        <el-input placeholder="请输入" v-model="form.certificate_authority"></el-input>
      </el-form-item>
      <el-form-item label="上传证书文件" prop="fileList" required>
        <el-upload
          class="upload-qualifications"
          ref="upload"
          action="#"
          :on-change="handleDownLoad"
          :on-remove="handleRemove"
          :on-preview="handleFileClick"
          :file-list="form.fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
<!--        <div v-if="form.fileList && form.fileList.length" class="file-list">-->
<!--          <span v-for="file in form.fileList" :key="file.">-->
<!--            <i class="el-icon-paperclip"></i>-->
<!--          </span>-->
<!--        </div>-->
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="btnLoading"
        @click="handleSubmit">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 证书数据
    formData: {
      type: Object,
      default: () => ({})
    },
    btnLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        certificate_name: '',
        certificate_id: '',
        skill_level: '',
        issue_date: '',
        validity_period: '',
        certificate_authority: '',
        fileList: []
      },
      // form 表单校验规则
      rules: {
        certificate_name: [
          { required: true, message: '请输入证书名称' }
        ],
        certificate_id: [
          { required: true, message: '请输入证书编号' }
        ],
        skill_level: [
          { required: true, message: '请输入技能等级' }
        ],
        issue_date: [
          { required: true, message: '请选择发证日期', }
        ],
        validity_period: [
          { required: true, message: '请选择有效期' }
        ],
        certificate_authority: [
          { required: true, message: '请输入发证机关' }
        ],
        fileList: [
          { type: 'array', required: true, message: '请上传证书文件' }
        ],
      },
    };
  },
  watch: {
    formData: {
      deep: true,
      handler(data) {
        if (data) {
          Object.keys(this.form).forEach(key => {
            if (data[key]) {
              if (key === 'fileList') {
                this.form[key] = data[key].map(item => ({
                  name: item.file_name,
                  ...item
                }));
                return;
              }
              this.form[key] = data[key];
            }
          });
        }
      }
    },
    visible(val) {
      if (!val) {
        this.form = {
          certificate_name: '',
          certificate_id: '',
          skill_level: '',
          issue_date: '',
          validity_period: '',
          certificate_authority: '',
          fileList: []
        };
      }
    }
  },
  computed: {
    title() {
      return `${this.type === 'add' ? '新增' : '编辑'}资质`;
    }
  },
  methods: {
    /**
     * 选取文件
     * @param file {File} 当前文件
     * @param fileList {FileList} 文件列表
     */
    handleDownLoad(file, fileList) {
      this.form.fileList = fileList.map(item => item.raw || item);
    },
    /**
     * 删除文件
     * @param file {File} 当前文件
     * @param fileList {FileList} 文件列表
     */
    handleRemove(file, fileList) {
      this.form.fileList = fileList.map(item => item.raw || item);
    },
    /**
     * 点击文件列表中已上传的文件时的钩子
     * @param file {File} 当前文件
     */
    handleFileClick(file) {
      if (file.url) {
        window.open(this.$checkUrl(file.url));
      }
    },
    /**
     * 提交
     * @returns {FormData | Boolean} 表单数据
     */
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.form);
        }
      });
    },
    // 取消、关闭
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style lang="scss">
  @import '../../../assets/styles/main';

  .qualifications-model {
    .qualifications-form {
      padding-right: 20px;
      .upload-qualifications {
        .el-upload-list__item-name, .el-icon-close, .el-icon-document {
          color: #fff;
          transition: color .3s;
        }
        .el-upload-list__item:hover {
          background-color: $inputBgRbga;
          .el-upload-list__item-name, .el-icon-document, .el-icon-close {
            color: $mainColor;
          }
        }
      }
    }
  }
</style>
